<template>
  <div class="wrap">
    <div class="info">
      <div class="base">
        <div class="name">{{info.job_name}}</div>
        <div class="price">{{info.salary}}/天</div>
      </div>
      <ul class="tags">
        <li>{{info.area_name}}</li>
        <li>{{info.job_type}}</li>
        <li>{{info.visits}}次浏览</li>
        <li class="last-tag">{{info.create_time}}</li>
      </ul>
      <ul class="list">
        <li>
          <img
            class="icon"
            :src="iconInfo.payIcon"
          />
          {{payType[info.settlement]}}
        </li>
        <li>
          <img
            class="icon"
            :src="iconInfo.pepleIcon"
          />
          招{{info.recruitment_nums}}人
        </li>
        <li class="last">
          <img
            class="icon"
            :src="iconInfo.genderIcon"
          />
          {{genderType[info.recruitment_sex]}}
        </li>
      </ul>
    </div>
    <div class="info">
      <div class="name content-title">
        工作内容及要求
      </div>
      <div class="content-info">
        <rich-text :nodes="info.job_desc"/>
      </div>
    </div>
    <div class="info" v-if="info.tpl_type == 1">
      <div class="name content-title">
        工作时间
      </div>
      <div class="content-info">
        <rich-text :nodes="info.job_time"/>
      </div>
    </div>
    <div class="info" v-if="info.tpl_type == 1">
      <div class="name content-title">
        工作地点
      </div>
      <div class="address-info">
        <div class="address-title">{{info.job_location}}</div>
        <img
          class="address-map"
          :src="info.jobLocationImg"
        />
      </div>
    </div>
    <div class="info" v-if="info.tpl_type == 1">
      <div class="name content-title">
        工作福利
      </div>
      <div class="content-info">
        {{info.jobs_welfare}}
      </div>
    </div>
    <div class="info" v-if="info.tpl_type == 1">
      <div class="name content-title">
        机构信息
      </div>
      <div class="company-base">
        <div class="logo">
          <img :src="info.headImgUrl" />
        </div>
        <div>
          <div class="name name--margin">{{info.businessName}}</div>
          <div class="contact">联系人：{{info.link_man}}</div>
        </div>
      </div>
    </div>
    <div
      class="footer"
      v-if="!type"
    >
      <div
        class="message-info"
        @click="handleTel"
      >
        <img :src="iconInfo.messageIcon" />
        <div>联系商家</div>
      </div>
      <div
        class="join-btn"
        @click="goApply"
      >报名参加</div>
    </div>
    <div
      v-if="type"
      class="flex btns flex-main-end"
    >
      <button
        class="giveup"
        @click="cancelJobsApply(info.job_id)"
      >放弃报名</button>
      <button
        class="link"
        @click="handleTel"
      >联系企业</button>
      <button
        class="del"
        @click="deleteJobsApply(info.job_id)"
      >删除</button>
    </div>
  </div>
</template>
<script>
import {cutTime} from '@/utils/filters.js';
const payIcon = require('@static/images/pay-bag.png');
const genderIcon = require('@static/images/gender.png');
const pepleIcon = require('@static/images/peple.png');
const messageIcon = require('@static/images/message.png');
export default {
  data() {
    return {
      info: {},
      iconInfo: {
        payIcon,
        genderIcon,
        pepleIcon,
        messageIcon
      },
      payType: {
        1: '小时',
        2: '日结',
        3: '周结',
        4: '月结'
      },
      genderType: {
        0: '男女不限',
        1: '男',
        2: '女'
      },
      type: false
    };
  },
  methods: {
    getDetail(id) {
      this.$api.getJobsInfo({
        jobId: id
      }).then(({ data }) => {
        data.create_time = cutTime(data.create_time);
        this.info = data;
      });
    },
    goApply() {
      if(this.info.jobApplyStatus == 3 || !this.info.jobApplyStatus){
        wx.navigateTo({
          url: `/pages/job/apply/main?id=${this.info.job_id}`
        });
      } else {
        wx.showToast({
          title: '您已报名', //提示的内容
          icon: "none"
        });
      }
    },
    handleTel() {
      wx.makePhoneCall({
        phoneNumber: this.info.link_tel
      });
    },
    //取消兼职申请
    cancelJobsApply(id) {
      const self = this;
      wx.showModal({
        title: '取消',
        content: '您确定要取消兼职申请？',
        success(res) {
          if (res.confirm) {
            self.$api.cancelJobsApply({ id }).then(res => {
              if (res.code == 0) {
                wx.showToast({
                  title: res.msg, //提示的内容,
                  icon: "none", //图标,
                  duration: 1500, //延迟时间,
                  mask: true, //显示透明蒙层，防止触摸穿透,
                  success: res => {
                    wx.navigateBack({
                        delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
                      });
                  }
                });
              } else {
                wx.showToast({
                  title: res.msg, //提示的内容,
                  icon: "none", //图标,
                  duration: 1500, //延迟时间,
                  mask: true //显示透明蒙层，防止触摸穿透,
                });
              }
            });
          } else if (res.cancel) {
          }
        }
      })
    },
    //删除兼职申请
    deleteJobsApply(id) {
      const self = this;
      wx.showModal({
          title: '删除',
          content: '您确定要删除兼职申请？',
          success(res) {
            if (res.confirm) {
              self.$api.deleteJobsApply({ id }).then(res => {
                if (res.code == 0) {
                  wx.showToast({
                    title: res.msg, //提示的内容,
                    icon: "none", //图标,
                    duration: 1500, //延迟时间,
                    mask: true, //显示透明蒙层，防止触摸穿透,
                    success: res => {
                        wx.navigateBack({
                          delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
                        });
                    }
                  });
                } else {
                  wx.showToast({
                    title: res.msg, //提示的内容,
                    icon: "none", //图标,
                    duration: 1500, //延迟时间,
                    mask: true, //显示透明蒙层，防止触摸穿透,
                    success: res => {}
                  });
                }
              });
            } else if (res.cancel) {}
          }
        })
      
    }
  },
  onShow() {
    const params = this.$getQuery();
    //我接的兼职详情
    this.type = params.type == 1? true : false;
    this.getDetail(params.id);
  }
}
</script>
<style lang="scss" scoped>
.btns {
  button {
    width: 60px;
    height: 21px;
    background: rgba(59, 184, 253, 1);
    border-radius: 2px;
    font-size: 12px;
    font-family: PingFang;
    font-weight: 500;
    line-height: 21px;
    margin: 0;
    padding: 0;
    margin-left: 10px;
  }
  .giveup {
    border: 1px solid rgba(59, 184, 253, 1);
    background: white;
    color: rgba(59, 184, 253, 1);
  }
  .link,
  .del {
    color: rgba(255, 255, 255, 1);
  }
}
.wrap {
  padding: 15px 15px 74px;
  min-height: calc(100% - 30px);
  background: $grey-bg;
}
.info {
  background: #fff;
  border-radius: 4px;
  margin-bottom: 15px;
}
.base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 15px 0px;
}
.name {
  font-size: 15px;
  color: $color-text;
}
.price {
  font-size: 14px;
  color: $theme-color;
}
.tags {
  display: flex;
  color: $grey-color;
  font-size: 12px;
  padding-left: 5px;
  li {
    padding: 0px 10px;
    margin: 15px 0;
  }
  li:not(.last-tag) {
    border-right: 1px solid $grey-border-color;
  }
}
.list {
  display: flex;
  border-top: 1px solid $grey-border-color;
  li {
    flex: 1;
    padding: 15px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  li:not(.last-tag) {
    border-right: 1px solid $grey-border-color;
  }
}
.icon {
  width: 12px;
  height: 12px;
  margin-right: 5px;
}
.content-title {
  padding: 15px;
  border-bottom: 1px solid $grey-border-color;
}
.content-info {
  font-size: 12px;
  color: #40444c;
  line-height: 21px;
  padding: 15px;
}
.address-info {
  font-size: 12px;
  color: #40444c;
  padding: 0px 15px 15px;
}
.address-title {
  line-height: 21px;
  padding: 10px 0px;
}
.address-map {
  width: 315px;
  height: 150px;
  border-radius: 4px;
}
.company-base {
  display: flex;
  padding: 15px;
}
.logo {
  width: 60px;
  height: 60px;
  line-height: 60px;
  border: 1px solid $grey-border-color;
  border-radius: 2px;
  text-align: center;
  margin-right: 10px;
  img {
    width: 40px;
    height: 40px;
    border-radius: 2px;
  }
}
.name--margin {
  margin-top: 10px;
}
.contact {
  color: $grey-color;
  margin-top: 15px;
}
.footer {
  display: flex;
  align-items: center;
  position: fixed;
  width: 375px;
  bottom: 0px;
  left: 0px;
  padding: 15px;
  box-sizing: border-box;
  background: #fff;
}
.message-info {
  display: flex;
  align-items: center;
  flex-direction: column;
  color: #40444c;
  font-size: 12px;
  img {
    width: 16px;
    height: 15px;
    margin-bottom: 10px;
  }
}
.join-btn {
  flex: 1;
  background: $theme-color;
  color: #fff;
  height: 44px;
  line-height: 44px;
  text-align: center;
  font-size: 15px;
  border-radius: 4px;
  margin-left: 10px;
}
</style>